<template>
  <view class="app register">
    <view class="content">
      <view class="header"><image class="logo" :src="logoImage"></image></view>
      <view class="form-view">
        <view class="form-item form-border">
          <input
            class="form-input"
            v-model="form1.nickname"
            type="text"
            placeholder="请输入昵称"
            placeholder-style="'color':'#8e8e8e'"
          />
        </view>

        <view class="form-item form-border">
          <input
            class="form-input"
            v-model="form1.username"
            type="text"
            placeholder="请输入用户名"
            placeholder-style="'color':'#8e8e8e'"
          />
        </view>

        <view class="form-item form-border">
          <input
            class="form-input"
            v-model="form1.password"
            type="password"
            placeholder="请输入密码"
            placeholder-style="'color':'#8e8e8e'"
          />
        </view>
        <view class="form-item form-border">
          <input
            class="form-input"
            v-model="form1.password2"
            type="password"
            placeholder="请再次输入密码"
            placeholder-style="'color':'#8e8e8e'"
          />
        </view>
      </view>
      <view class="login-btn">
        <button
          class="btn success circle"
          hover-class="hover"
          shape="circle"
          @click="register"
          :plain="false"
          :hair-line="false"
          type="success"
        >
          注 册
        </button>
      </view>
      <!-- 底部信息 -->
      <view class="footer">
        <label>
          <checkbox-group @change="checkboxChange">
            <checkbox
              class="footer-checkbox"
              value="true"
              :checked="form1.agreement"
              active-color="#737373"
              shape="circle"
            ></checkbox
            ><text>同意</text>
          </checkbox-group>
        </label>
        <navigator url="" open-type="navigate" style="color: #007aff"
          >《用户协议》</navigator
        >
      </view>
    </view>
  </view>
</template>

<script>
let vk = uni.vk;
export default {
  data() {
    // 页面数据变量
    return {
      // init请求返回的数据
      data: {},
      // 表单请求数据
      form1: {
        agreement: true,
        username: "",
        nickname: "",
        password: "",
        password2: "",
      },
      scrollTop: 0,
      isRotate: false,
      logoImage: "/static/logo.png",
    };
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  // 监听 - 页面每次【加载时】执行(如：前进)
  onLoad(options) {
    //console.log("onLoad",options);
    vk = uni.vk;
    this.init(options);
  },
  // 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
  onReady() {},
  // 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
  onShow() {},
  // 监听 - 页面每次【隐藏时】执行(如：返回)
  onHide() {},
  // 监听 - 页面下拉刷新
  onPullDownRefresh() {
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 1000);
  },
  // 监听 - 点击右上角转发时
  onShareAppMessage(options) {},
  // 函数
  methods: {
    // 页面数据初始化函数
    init(options = {}) {
      console.log("init: ", options);
    },
    pageTo(path) {
      vk.navigateTo(path);
    },
    checkboxChange(e) {
      let that = this;
      let value = e.detail.value || [];
      if (value.length > 0 && value[0]) {
        that.form1.agreement = true;
      } else {
        that.form1.agreement = false;
      }
    },
    // 注册(用户名+密码)
    register() {
      let that = this;
      if (that.isRotate) {
        //判断是否加载中，避免重复点击请求
        return false;
      }
      const { agreement, username, nickname, password, password2 } = that.form1;
      if (!agreement) {
        vk.toast("请阅读并同意用户服务及隐私协议", "none");
        return;
      }
      if (!nickname || nickname.trim().length === 0) {
        vk.toast("请输入昵称", "none");
        return;
      }
      if (nickname.trim().length < 2 || nickname.trim().length > 16) {
        vk.toast("昵称长度应在2-16个字符之间", "none");
        return;
      }
      if (!username || username.trim().length === 0) {
        vk.toast("请输入用户名", "none");
        return;
      }
      if (username.trim().length < 3 || username.trim().length > 20) {
        vk.toast("用户名长度应在4-20个字符之间", "none");
        return;
      }
      if (!vk.pubfn.test(password, "pwd")) {
        vk.toast(
          "密码以字母开头，长度在6~18之间，只能包含字母、数字和下划线",
          "none"
        );
        return;
      }
      if (!vk.pubfn.test(password2, "pwd")) {
        vk.toast(
          "密码以字母开头，长度在6~18之间，只能包含字母、数字和下划线",
          "none"
        );
        return;
      }
      if (password != password2) {
        vk.toast("两次密码必须相同!", "none");
        return;
      }
      that.isRotate = true;
      vk.userCenter.register({
        data: that.form1,
        success: (data) => {
          that.isRotate = false;
          vk.toast("注册成功!");
          vk.userCenter.logout({
            loading: false,
            success: (data) => {
              vk.navigateBack();
            },
          });
        },
        complete: () => {
          that.isRotate = false;
        },
      });
    },
  },
  // 计算属性
  computed: {},
};
</script>
<style lang="scss" scoped>
@import url("../css/main.css");
</style>
